<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="" href="../../sq/css/public.css">
    <link rel="stylesheet" type="" href="http://at.alicdn.com/t/font_5ufdxzeyp919k9.css">
    <link rel="stylesheet" type="" href="../../sq/css/administrate.css">
    <title>店铺管理</title>
</head>
<body style="overflow: hidden">
<div id="header">
    <span class="left" onclick="window.history.go(-1)"><i class="icon iconfont icon-fanhui"></i></span>
    <p>店铺信息</p>
</div>
    <div class="pic" style="padding-top: 15px; height: 280px">
    </div>
    <div class="shop_name">

    </div>
    <div class="explain">
        分销佣金 = 线下扫码支付金额 * 分销比例
    </div>
    <div class="end">
        提交
    </div>
<div class="layout">

</div>
<script type="text/html" id="type_banner">
    <div id="header">
        <span class="left" onclick="showLay(1)"><i class="icon iconfont icon-fanhui"></i></span>
        <p>店铺banner管理</p>
    </div>
    <div class="pic_list">
        <div class="pic_list-box">
            <% if(store_info['m_store_banners']){ %>
            <% for(var i=0; i<store_info.m_store_banners.length;i++) { %>
            <div class="item-pic"><img src="<%=wapsite%>/data/upload/shop/banner/<%= store_info.m_store_banners[i] %>" alt=""><p onclick="delImg(this)" isUpload="1">删除</p></div>
            <% } %>
            <% } %>
            <div class="upload_btn"><input type="file"  onchange="upload(this)"></div>
        </div>
    </div>
    <div class="upload" onclick="up()">立即上传</div>
</script>
<script type="text/html" id="top_header">
    <div id='slider' class='swipe' onclick="showLay(0)">
        <div class='swipe-wrap'>
            <% if(store_info.m_store_banners) { %>
            <% for(var i=0; i<store_info.m_store_banners.length;i++) { %>
            <div><img class="img1" src="<%=wapsite%>/data/upload/shop/banner/<%= store_info.m_store_banners[i] %>" alt=""/></div>
            <% } %>
            <% }else{ %>
            <div><img class="img1" src="../../images/dianpu.png" alt=""/></div>
            <% } %>
        </div>
    </div>
</script>
<script type="text/html" id="store_info">
    <% if(store_info['store_map']) { %>
    <input type="hidden" id="map" value="<%= store_info['store_map']['map_id'] %>">
    <input type="hidden" id="lat" value="<%= store_info['store_map']['baidu_lat'] %>">
    <input type="hidden" id="lng" value="<%= store_info['store_map']['baidu_lng'] %>">
    <input type="hidden" id="pro" value="<%= store_info['store_map']['baidu_province'] %>">
    <input type="hidden" id="city" value="<%= store_info['store_map']['baidu_city'] %>">
    <input type="hidden" id="dis" value="<%= store_info['store_map']['baidu_district'] %>">
    <input type="hidden" id="street" value="<%= store_info['store_map']['baidu_street'] %>">
    <% } %>
    <div>
    店铺名称<input type="text" id="store_name" value="<%= store_info['store_name'] %>">
            </div>
            <div>
            店铺类别<input type="text" value="商圈">
            </div>
            <div>
            营业时间<input type="text" id="store_time" value="<%= store_info['store_time'] %>">
            </div>
            <div>
            联系电话<input type="tel" id="store_tel" <% if(store_info['store_tel']!=0) { %> value="<%= store_info['store_tel'] %>"<% }else{ %> placeholder="暂未填写电话"<%}%>>
            </div>
            <div style="height:20px;background-color: #f0eff5;"></div>
            <div>
            店铺地址<input type="text" id="store_address" <% if(store_info['store_map']) { %> value="<%= store_info['store_map']['address_info'] %>"<% }else{ %> placeholder="暂未填写地址"<%}%>">
            </div>
            <div>
            分销比例<input type="text" readonly value="20%">
            </div>
</script>
<script type="text/javascript" src="../../js/config.js"></script>
<script type="text/javascript" src="../../js/zepto.min.js"></script>
<script type="text/javascript" src="../../js/template.js"></script>
<script type="text/javascript" src="../../js/swipe.js"></script>
<script type="text/javascript" src="../../js/startmove.js"></script>
<script type="text/javascript" src="../../js/simple-plugin.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script>
    var count = 1;
    var key = getCookie('key');
    var storeid = getCookie('sqstoreid');
    $(function() {

        if (!key || !storeid) {
            window.location.href = '/sq/login.html';
        }
        // 请求店铺信息
        $.ajax({
            type: 'get',
            url: ApiUrl + "/index.php?act=store&op=getSqStoreInfo",
            data: {key: key, sqstore_id: storeid},
            dataType: "json",
            success: function (data) {
                data.datas['wapsite'] = SITEURL;
                var store = template.render('top_header', data.datas);
                if(data.datas.store_info.m_store_banners){
                   count = data.datas.store_info.m_store_banners.length;
                }
                $(".pic").html(store);
                var store_info = template.render('store_info', data.datas);
                $(".shop_name").html(store_info);
                var banner = template.render('type_banner',data.datas);
                $('.layout').html(banner);
                var mySwipe = new Swipe(document.getElementById('slider'), {
                    startSlide: 0,  //起始图片切换的索引位置
                    auto: 3000, //设置自动切换时间，单位毫秒
                    continuous: true,  //无限循环的图片切换效果
                    disableScroll: false,  //阻止由于触摸而滚动屏幕
                    stopPropagation: true,  //停止滑动事件
                    callback: function(index, element) {},  //回调函数，切换时触发
                    transitionEnd: function(index, element) {}  //回调函数，切换结束调用该函数
                });

            }
        })

        $(".end").on('click',function(){
            var name = $("#store_name").val();
            var time = $("#store_time").val();
            var address = $("#store_address").val()=='暂未填写地址'?'':$("#store_address").val();
            var tel = $("#store_tel").val()=='暂未填写电话'?'':$("#store_tel").val();
            var map = $("#map").val();
            var pro = $("#pro").val();
            var city = $("#city").val();
            var dis = $("#dis").val();
            var street = $("#street").val();
            var lat = $("#lat").val();
            var lng = $("#lng").val();

            if(name==''){
                    creatLayout("请填写详细信息");
            }
            $.sDialog({
                skin:"red",
                content:"确认要提交信息吗？",
                okBtn:true,
                cancelBtn:true,
                okFn: toSubmit, //点击确定按钮执行的函数
            });

            function toSubmit(){
                $.ajax({
                    type:'POST',
                    url:ApiUrl+"/index.php?act=store&op=saveSqStore",
                    data:{key:key,name:name,time:time,address:address,tel:tel,map_id:map,lat:lat,lng:lng,pro:pro,city:city,dis:dis,street:street},
                    dataType:"json",
                    success:function(data){
                          creatLayout(data.datas.msg)
                    }
                })
            }
        });

    });

    function up(){
        var pics = [];
        var picsbox = $('.pic_list-box img');
        for(var i=0; i<picsbox.length;i++){
            pics.push(picsbox[i].src);
        }
        $.ajax({
            type:'POST',
            url:ApiUrl+"/index.php?act=store&op=savepics",
            data:{pics:pics,store_id:storeid},
            dataType:"json",
            success:function(data){
                data['wapsite'] = SITEURL;
                data = data.datas;
                if(data['status']==200){
                    count = data.store_info.m_store_banners.length;
                    var store = template.render('top_header',data);
                    var banner = template.render('type_banner',data);
                    $('.layout').html(banner);
                    $(".pic").html(store);
                    // 标记为已上传
                    $(".pic_list-box").find('p').attr('isUpload',1);
                    var mySwipe = new Swipe(document.getElementById('slider'), {
                        startSlide: 0,  //起始图片切换的索引位置
                        auto: 3000, //设置自动切换时间，单位毫秒
                        continuous: true,  //无限循环的图片切换效果
                        disableScroll: false,  //阻止由于触摸而滚动屏幕
                        stopPropagation: true,  //停止滑动事件
                        callback: function(index, element) {},  //回调函数，切换时触发
                        transitionEnd: function(index, element) {}  //回调函数，切换结束调用该函数
                    });
                    creatLayout("图片上传成功");
                }else{
                    creatLayout("图片上传失败");
                }
            }
        })
    }

    function showLay(o){
        if(o==1){
            $sw = $(window).width()
            $(".layout").css('left', $sw);
        }else {
            $(".layout").css('left', 0);
        }
    }

        function calcRem() {
        var http = document.getElementsByTagName("html")[0];
        var w = document.documentElement.clientWidth;
        http.style.fontSize = w / 32 + "px";
       }
    calcRem();
    window.onresize = function() {
        calcRem();
    };

    /**
     * 上传请求方法
     * @param obj
     */
    function upload(obj) {
        var _self = obj;
        var _this = $(obj);
        var fileReader = new FileReader();
        fileReader.onload = function (e) {
            if (fileReader.readyState == FileReader.DONE) {
                var file = _self.files[0];
                var size = file.size;
                var width = file.width;
                var height = file.height;
                if(count>3) {
                        creatLayout('最多只能上传4张图')
                        return;
                }
                count++;
                $(_this).parent().before('<div class="item-pic"><img src="'+this.result+'" alt=""><p onclick=" delImg(this)">删除</p></div>')
            }
        };
        //一次加载多个文件
        var i = 0, src = _self.files;
        fileReader.readAsDataURL(src[i]);
        fileReader.onloadend = function () {
            i++;
            if (i < src.length) fileReader.readAsDataURL(src[i]);
        }
    }

    function delImg(_this){
        var isUpload = $(_this).attr('isUpload');
        if (isUpload){
            var img = $(_this).parent().find('img');
            imagesrc = img[0].src.substr(img[0].src.lastIndexOf('/')+1);
            $.ajax({
                type:'post',
                url:ApiUrl+"/index.php?act=store&op=bannerdel",
                data:{store_id:storeid,src:imagesrc},
                dataType:'json',
                success:function(data){
                     data = data.datas;
                     data['wapsite'] = SITEURL;
                     if(data.status==200){
                          var store = template.render('top_header',data);
                         count--;
                          $(".pic").html(store);
                          var mySwipe = new Swipe(document.getElementById('slider'), {
                             startSlide: 0,  //起始图片切换的索引位置
                             auto: 3000, //设置自动切换时间，单位毫秒
                             continuous: true,  //无限循环的图片切换效果
                             disableScroll: false,  //阻止由于触摸而滚动屏幕
                             stopPropagation: true,  //停止滑动事件
                             callback: function(index, element) {},  //回调函数，切换时触发
                             transitionEnd: function(index, element) {}  //回调函数，切换结束调用该函数
                         });
                          creatLayout("删除成功");
                     }else{
                          creatLayout("删除失败");
                     }
                }
            })
        }
        var parent = $(_this).parent();
        parent.remove();
    }
</script>
</body>
</html>